  <template>
  <div class="contaienr pd50">
    <van-swipe :autoplay="3000" indicator-color="white" class="goods-swiper">
      <van-swipe-item v-for="item in [product]" :key="item.id">
        <img style="margin: 0 auto;" :src="item.coverImg" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="countdown mb10">
      <div class="countdown-title">品牌：{{product.brandsName}}</div>
      <div class="countdown-title">类别：{{product.typeName}}</div>
    </div>
    <div class="goods-desc mb10">
      <div class="goods-desc-hd">
        <span class="goods-desc-name">{{product.goodsName}}</span>
      </div>
      <!-- <div class="goods-desc-brief"
        v-if="basicInfo.characteristic">{{basicInfo.characteristic}}</div> -->
      <div class="goods-desc-price"><span class="goods-desc-price_min">￥{{product.sellPrice}}</span> </div>
      <div class="goods-desc-price_original mb10">￥{{product.originalPrice}}</div>

      <div class="goods-desc-more van-hairline--top">
        <div class="goods-desc-more-item" >
          <template>
            运费 {{'免运费'}}
          </template>
          </div>
        <!-- <div class="goods-desc-more-item ui-center">购买：{{basicInfo.numberSells}}</div> -->
        <div class="goods-desc-more-item ui-right">剩余 {{product.inventory}}</div>
      </div>
    </div>
    <div class="goods-section">
      <van-cell class="mb10"
        :title="propTitle"
        is-link
        @click="onShowSku"
        v-if="properties.length" />
      <van-cell class="mb10"
        title="服务 担保交易"
        is-link
        @click="onShowPopup" />
    </div>
    <template v-if="commentList.length">
      <div class="goods-reputation mb10">
        <van-cell :to="'/goods-reputation?id='+product.id"
          class="mb10"
          :title="'评价('+commentList.length+')'"
          value="全部评价"
          is-link />
        <div class="goods-reputation-inner">
          <div class="goods-reputation-inner-hd">
            <!-- <div class="goods-reputation-inner-media"><img :src="reputation.avatarUrl"
                alt=""></div> -->
            <div class="goods-reputation-inner-name">{{commentList[0].userNickName}}</div>
            <div class="goods-reputation-inner-stars">
              <!-- <van-rate v-model="reputation.rate"
                :size="14"
                color="#f44"
                void-icon="star"
                void-color="#eee"
                readonly /> -->
                {{commentList[0].createTime.split('T')[0]}}
            </div>
          </div>
          <div class="goods-reputation-inner-ft">
            <p>{{commentList[0].content}}</p>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <van-cell class="mb10" title="暂无评价" />
    </template>
    <!-- <div class="goods-h2 common-h2">
      <span class="common-h2-title">商品详情</span>
    </div>
    <div class="goods-content" v-html="content"></div> -->

    <!-- 公用弹层 -->
    <van-popup v-model="showPopup" position="bottom">
      <div class="popup">
        <div class="service-desc">
          <img src="../../assets/gif_1.gif" style="margin:20px auto;" />
        </div>
        <van-button class="popup-confirm" type="danger" size="large" @click="onShowPopup">我知道了</van-button>
      </div>
    </van-popup>
    <!-- 商品规格弹层 -->
    <van-sku
      v-model="showSku"
      :sku="skuData.sku"
      :goods="skuData.goods"
      :goods-id="skuData.goods_id"
      :quota="skuData.quota"
      :quota-used="skuData.quota_used"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    >
      <template slot="sku-messages" v-if="addressList.length">
        <van-field
          v-if="cartOrBuy"
          readonly
          clickable
          label="收货地址"
          :value="good.consigneeAddress"
          placeholder="选择收货地址"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          title="收货地址"
          show-toolbar
          :columns="addressList"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
        </van-popup>
      </template>
    </van-sku>
    <!-- 商品导航栏 -->
    <van-goods-action>
      <van-goods-action-icon icon="thumb-circle-o"
        text="首页"
        to="/home"
        replace />
      <van-goods-action-icon icon="cart-o"
        text="购物车"
        to="/cart"
        :info="cartCount"
        replace />
      <van-goods-action-button type="warning"
        text="加入购物车"
        @click="addCart" />
        <van-goods-action-button type="danger"
        text="立即购买"
        @click="onClickBuy" />
    </van-goods-action>
    <!-- 右侧悬浮图标 -->
    <div class="side-bar">
      <div class="side-bar-backtop anim-scale" @click="goBackTop" v-show="backTop"><van-icon :size="22" color="#7d7e80" name="arrow-up" /></div>
    </div>
  </div>
</template>
<script>
import { scrollTo } from '@/common/scroll-to'
import { mapMutations, mapState } from 'vuex'
export default {
  data() {
    return {
      cartOrBuy: true, // 直接购买时 为 true 显示收货地址， 加入购物车 为 false 则不显示
      good: {
        id: 0,
        num: 0,
        serialNumber: 0,
        consigneeAddress: '',
        consigneePhone: '',
        consigneeName: ''
      },
      showPicker: false,
      addressList: [], // 只有纯地址的列表
      addressListAll: [], // 完整地址对象数组
      product: {},
      marketing: {},
      cartCount: '',
      backTop: false,
      banner: [],
      commentList: [],
      reputation: {},
      basicInfo: {},
      logistics: {},
      content: '',
      properties: [],
      hasFav: false,
      coupons: [],
      showPopup: false,
      showPtPopup: false,
      propTitle: '选择',
      showSku: false,
      skuData: { // sku规格 2222
        goods_id: '',
        goods: {},
        quota: 0, // 0表示不限购
        quota_used: 0,
        goods_info: {},
        sku: {
          price: '0.00', // 默认价格（单位元）
          stock_num: 0, // 商品总库存
          none_sku: false, // 是否无规格商品
          hide_stock: false, // 是否隐藏剩余库存
          // collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
          tree: [],
          list: [],
          messages: []
        }
      }
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
    this.getGoodsDetail(this.$route.params.id)
    this.getCommentByShop(this.$route.params.id)
    this.getAddressList()
    // this.getGoodsReputation(this.$route.query.id)
  },
  mounted() {
    window.addEventListener('scroll', this.onPageScroll, false)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.onPageScroll, false)
  },
  methods: {
    ...mapMutations(['setCurGoods']),
    onPageScroll() {
      const sTop = document.documentElement.scrollTop || document.body.scrollTop
      this.backTop = sTop >= 500
    },
    goBackTop() {
      scrollTo(0, 800)
    },
    onShowSku() {
      this.showSku = true
    },
    /**
     * onConfirm
     */
    onConfirm(val) {
      this.good.consigneeAddress = val.split(' ')[1]
      this.showPicker = false
    },
    /**
     * onCancel
     */
    onCancel() {
      this.showPicker = false
    },
    /**
     * onChange
     */
    onChange() {

    },
    /**
     * 立即购买 弹出sku
     */
    onClickBuy() {
      this.cartOrBuy = true
      this.onShowSku()
    },
    /**
     * 获取收货地址
     */
    getAddressList() {
      const query = {
        userId: this.user.id
      }
      this.$api.cart.getAddressList(query).then(res => {
        if (res.code === 200) {
          this.addressListAll = res.data
          this.addressList = res.data.map(item => {
            return item.consigneeName + ' ' +item.address
          })
        }
      })
    },
    /**
     * 直接购买
     */
    onBuyClicked(obj) {
      if (Object.keys(this.user).length === 0) {
        this.$router.push({
          path: '/login',
          query: {
            redirect: this.$route.fullPath
          }
        })
      } 
      else {
      //   let params = [{
      //   id: this.$route.query.id,
      //   goodsSerialNumber: this.product.serialNumber,
      //   amount: obj.selectedNum,
      //   totalMoney: this.skuData.sku.price * obj.selectedNum
      // }]
      // this.setCurGoods(params)
      // this.$router.push({
      //   path: '/order-submit'
      // })
        if (!this.good.consigneeAddress) {
          this.$toast.fail('还没有收货地址哦~')
          return
        }
        const selects = this.addressListAll.filter(item => item.address === this.good.consigneeAddress)[0]
        const arr = {
          userId: this.user.id,
          goodsSerialNumber: this.product.serialNumber,
          amount: obj.selectedNum,
          totalMoney: this.skuData.sku.price * obj.selectedNum,
          consigneeAddress: selects.address,
          consigneePhone: selects.consigneePhone,
          consigneeName: selects.consigneeName
        }
        const params = {
          orderList: [arr]
        }
        this.$api.cart.epay(params).then(res => {
          if (res.code === 200) {
            if (res.data.code) {
              this.$router.push({
                path: '/order-detail',
                query: {
                  id: res.data.code
                }
              })
            } else {
              this.$toast.fail(res.msg)
            }
          }
        })
      }
    },
    /**
     * 加入购物车 弹出sku
     */
    addCart() {
      this.cartOrBuy = false
      this.onShowSku()
    },
    /**
     *  加到购物车
     */
    onAddCartClicked(obj) {
      if (Object.keys(this.user).length === 0) {
        this.$router.push({
          path: '/login',
          query: {
            redirect: this.$route.fullPath
          }
        })
      } else {
        const params = {
          userId: this.user.id,
          goodsId: this.skuData.goods_id,
          amount: obj.selectedNum,
          totalMoney: this.skuData.sku.price * obj.selectedNum
        }
        this.$api.cart.addCart(params).then(res => {
          if (res.code === 200) {
            this.$router.push('/cart')
          }
        })
      }
    },
    onShowPopup() {
      // this.showPopup = !this.showPopup
    },
    /**
     * 获取当前商品的评论
     */
    getCommentByShop(id) {
      const query = {
        goodsId: id
      }
      this.$api.shop.getCommentByShop(query).then(res => {
        if (res.code === 200) {
          this.commentList = res.data
        }
      })
    },
    /**
     * 获取商品数据
     */
    getGoodsDetail(id) {
      const query = {
        goodsId: id
      }
      this.$api.shop.getShop(query).then(res => {
        if (res.code === 200) {
          this.product = res.data
          this.skuData.goods_id = res.data.id
          this.skuData.goods.picture = res.data.coverImg
          this.skuData.sku.price = res.data.sellPrice
          this.skuData.sku.stock_num = res.data.inventory
        }
      })
    },
    /**
     * 初始化sku数据
     */
    initSkuData(properties, basicInfo) {
    }
  }
}
</script>
<style lang="less" scoped>
.xiahua{
  text-decoration:line-through;
  color:#999;
}
.text-left {
  text-align: left;
}
.goods-desc {
  box-sizing: border-box;
  padding: 0 15px;
  background: #fff;
  &-hd {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding:10px 0;
  }
  &-name {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    flex:1;

  }
  &-price {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    &_min{
      font-size: 24px;
      color: #f44;
    }
    &_original{
      font-size: 12px;
      color: #999;
      text-decoration: line-through;
    }
    &_label{
      margin-left: 10px;
      box-sizing: border-box;
      display: inline-block;
      font-size: 10px;
      padding:2px 4px;
      border-radius:4px;
      color: #f44;
      border: 1px solid #f44;
    }
  }

  &-brief {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
  }

  &-more {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding:10px 0;
    &-item {
      flex: 1;
      font-size: 12px;
      color: #999;
    }
  }
  .btn-fav{
    box-sizing: border-box;
    display: inline-block;
    font-size: 12px;
    width:60px;
    text-align: center;
    padding:2px 10px;
    border-radius:10em;
    background-color: #fff;
    color: #666;
    border: 1px solid #ebedf0;
  }
  .btn-fav-danger{
    color: #f44;
    border: 1px solid #f44;
  }
}

.goods-content /deep/ img {
  max-width: 100% !important;
  margin: auto;
  height: auto !important;
}
.goods-content {
  box-sizing: border-box;
  background: #fff;
}

.goods-reputation {
  background: #fff;
  &-inner {
    padding: 0 15px;
    &-hd {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 10px;
      font-size: 12px;
      color: #666;
    }
    &-media {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      overflow: hidden;
      background: #eee;
      margin-right: 5px;
    }
    &-name {
      flex: 1;
      color: #ff703d
    }
    &-stars {
    }
    &-tag {
      padding: 2px 10px;
      border-radius: 10px;
      border: 1px solid #979797;
      font-size: 10px;
      color: #999;
      margin-right: 10px;
    }
    &-bd {
      padding: 10px 0;
    }
    &-ft {
      padding: 5px 0 10px;
      font-size: 14px;
      color: #999;
    }
  }
}
.service-desc {
  height: 70vh;
  padding: 10px 15px;
  font-size: 14px;
  color: #666;
}
.popup-coupon {
  position: relative;
  padding-top: 44px;
  padding-bottom: 50px;
}
.coupon-list {
  padding: 10px 15px;
  max-height: 70vh;
  overflow-y: auto;
  &-header {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    top: 0;
    left: 0;
    font-size: 14px;
    color: #333;
    padding: 10px 0;
    text-align: center;
  }
}
.coupon-list-item {
  box-sizing: border-box;
  height: 76px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #ffeeee;
  color: #ff4b52;
  margin-bottom: 10px;
  border-radius: 10px;
  &-hd {
    width: 100px;
    text-align: center;
    border-right: 1px slategrey #eee;
  }
  &-money {
    font-size: 24px;
    font-weight: bold;
    // margin-bottom:10px;
  }
  &-moneyHreshold {
    font-size: 12px;
  }
  &-bd {
    flex: 1;
  }
  &-name {
    font-size: 14px;
    padding: 5px 0;
  }
  &-dateEndDays {
    font-size: 12px;
    color: #d7a0a5;
  }
  &-btn {
    margin-right: 25px;
    display: inline-block;
    padding: 0.2em 0.5em;
    color: #fff;
    background: #ff4444;
    font-size: 10px;
    line-height: normal;
    border-radius: 0.8em;
  }
  &-btn-clicked {
    color: #ff4444;
    background: #ffffff;
    border: 1px solid #ff4444;
    pointer-events: none;
  }
}
/* 商品玩法 */
.countdown{
  box-sizing:border-box;
  padding:0 15px;
  height:45px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content: space-between;
  background: linear-gradient(
    180deg,
    rgba(255, 70, 57, 1) 0%,
    rgba(255, 112, 61, 1) 100%
  );
  &-title{
    font-size: 18px;
    font-weight:bold;
  }
  &-value{
    font-size: 12px;
    color:#fff;
  }
  /deep/.van-count-down, .van-divider{
    font-size: 12px;
    color:#fff;
  }
}
.rule{
  background-color: #fffbe8;
  font-size: 14px;
  color: #999;
  padding:10px 15px;
  &-header{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:10px;
    &-title{
      color:#ed6a0c;
      flex:1;
    }
    &-value{
      font-size: 12px;
    }
  }
  &-body{
    font-size: 12px;
    color: #999;
  }
}
.pintuan{
  &-list{
    }
  &-item{
    padding:10px 15px;
    display:flex;
    align-items: center;
    justify-content: flex-start;
    &-media{
      width:40px;
      height:40px;
      overflow: hidden;
      border-radius:50%;
      margin-right:5px;
    }
    &-name{
      flex: 1;
    }
    &-info{
      flex:1;
      text-align:right;
      margin-right:10px;
      &__bd{
        display:flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    &-btn{
      font-size: 14px;
      padding:8px 15px;
      border-radius:20px;
      color: #fff;
      background:linear-gradient(309deg,rgba(255,112,61,1) 0%,rgba(255,70,57,1) 100%);
    }
    &-btn:active{
      opacity:.8
    }
  }
}
@border-radius: 25px;
.btn-danger{
  flex:1;
  box-sizing: border-box;
  width:100%;
  display:inline-block;
  border-radius:@border-radius;
  text-align:center;
  padding:12px 0;
  font-size: 14px;
  color:#fff;
  background:linear-gradient(309deg,rgba(255,112,61,1) 0%,rgba(255,70,57,1) 100%);
}
/* 弹层*/
.my-popup{
  box-sizing: border-box;
  background:#fff;
  padding:25px 46px;
  text-align:center;
  width:260px;
  border-radius:16px;
  &-header{
    font-weight: bold;
    color:#1A1A1A;
    font-size: 16px;
    padding:10px 0;
  }
  &-close{
    position: absolute;
    top:15px;
    right:15px;
    font-size: 22px;
    color:#bfbfbf;
  }
}
.pintuan-popup{
  padding:25px 30px;
  &-sub{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    color:#666;
    margin-bottom:10px;
  }
  &-inner{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom:20px;
  }
  &-avatar+&-avatar{
    margin-left:10px;
  }
  &-avatar{
    box-sizing: border-box;
    width:60px;
    height:60px;
    border-radius:50%;
    overflow:hidden;
    border:1px solid #c0c0c0;
    &--empty{
      font-size: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.popup {
  position: relative;
  padding-bottom: 50px;
  &-confirm {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  &-close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #969799;
    font-size: 20px;
    text-align: center;
  }
}
.side-bar{
  position:fixed;
  right: 15px;
  bottom:60px;
  z-index:99;
  min-height:80px;
  &-share,&-backtop{
    box-sizing: border-box;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #7d7e80;
    width: 32px;
    height: 32px;
    box-shadow: 0 0 2px 3px hsla(0,0%,86.3%,.1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.anim-scale {
    animation-name: anim-scale;
    animation-duration: .3s;
    animation-fill-mode: both;
}
@keyframes anim-scale {
    0% {
        opacity: .3;
        -ms-transform: scale(.5);
        transform: scale(.5)
    }

    100% {
        opacity: 1;
        -ms-transform: scale(1);
        transform: scale(1)
    }
}
</style>

